<template>
  <div class="main-box">
    <TableSearch :model="params">
      <template>
        <el-form-item :label="`${$t('用户id')}：`" prop="admin_id">
          <el-input v-model="params.admin_id" />
        </el-form-item>
        <el-form-item :label="`${$t('用户名称')}：`" prop="admin_name">
          <el-input v-model="params.admin_name" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">
            {{ $t('搜索') }}
          </el-button>
          <el-button @click="reset()">{{ $t('重置') }}</el-button>
        </el-form-item>
      </template>
    </TableSearch>

    <BaseTable :request="request" ref="baseTable" :params.sync="params">
      <el-table-column prop="id" label="ID" width="100px" />
      <el-table-column prop="admin_name" :label="$t('登录用户')" />
      <el-table-column prop="title" :label="$t('标题')" show-overflow-tooltip />
      <el-table-column prop="agent" :label="$t('登录设备')" />

      <el-table-column prop="addr" :label="$t('登录地点')" />
      <el-table-column prop="ip" :label="$t('登录IP')" width="130px" />
      <el-table-column
        prop="create_time"
        :label="$t('登录时间')"
        width="170px"
      />
    </BaseTable>
  </div>
</template>
<script>
import logApi from '@/api/log'
export default {
  data() {
    return {
      params: {
        admin_id: '',
        admin_name: ''
      },
      request: logApi.loginLog
    }
  },

  methods: {
    getList() {
      this.$refs.baseTable.getList('search')
    },
    // 搜索
    search() {
      this.getList()
    },
    // 重置搜索框
    reset() {
      this.params = {
        admin_name: '',
        admin_id: ''
      }
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.table-search .el-form-item {
  margin: 12px 8px 12px 0;
}
.el-table {
  margin-bottom: 20px;
}
</style>
